<template>
	<view class="order-details">
		<template v-if="!loading">
			<view class="order-details-content">
				<view class="order-item-content">
					<u-image src="@/static/image/logo.png" mode="" width="130rpx" height="130rpx"
						border-radius="12"></u-image>
					<view class="order-item-right">
						<view class="order-item-title">
							{{orderInfo.orderTitle}}
						</view>
						<view class="order-item-desc">
							{{orderInfo.createTime}}
						</view>
					</view>
				</view>
				<view class="order-details-row">
					<view class="order-details-row-title">
						订单编号
					</view>
					<view class="order-details-row-desc">
						{{orderInfo.mallOrderCode}}
					</view>
				</view>
				<view class="order-details-row" v-if="orderInfo.deliveryNumber">
					<view class="order-details-row-title">
						快递单号
					</view>
					<view class="order-details-row-desc">
						{{orderInfo.deliveryNumber}}
					</view>
				</view>
				<view class="order-details-row">
					<view class="order-details-row-title">
						下单时间
					</view>
					<view class="order-details-row-desc">
						{{orderInfo.createTime}}
					</view>
				</view>
				<view class="order-details-row">
					<view class="order-details-row-title">
						预约取件时间
					</view>
					<view class="order-details-row-desc">
						{{orderInfo.takePreTime}}
					</view>
				</view>

				<view class="confirm-order-address">
					<view class="home-address">
						<view class="select-item select-item-send">
							<view class="select-icon select-icon-send">
								取
							</view>
							<view class="select-text">
								<view class="select-text-title">
									{{sendTitle}}
								</view>
								<view class="select-text-desc">
									{{sendDesc}}
								</view>
							</view>
						</view>
						<view class="select-item select-item-recive">
							<view class="select-icon select-icon-recive">
								送
							</view>
							<view class="select-text">
								<view class="select-text-title">
									{{reciveTitle}}
								</view>
								<view class="select-text-desc">
									{{reciveDesc}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

			<view class="order-details-routers order-details-content" v-if="routers.length > 0">
				<view class="order-details-routers-header">
					物流信息
				</view>
				<view class="order-details-routers-list">
					<view class="order-details-routers-item" v-for="(item, index) in routers" :key="item.opCode">
						<view class="order-details-routers-item-icon"></view>
						<view class="order-details-routers-item-line" v-if="index < routers.length - 1"></view>
						<view class="order-details-routers-item-right">
							<view class="order-details-routers-item-title">
								{{item.acceptAddress}}
							</view>
							<view class="order-details-routers-item-desc">
								{{item.remark}}
							</view>
							<view class="order-details-routers-item-desc">
								{{item.acceptTime}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="loading-page">
				<u-loading mode="circle" color="#3D9C9A" size="56"></u-loading>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mallOrderId: '',
				orderInfo: {
					takePreTime: ''
				},
				routers: [],
				loading: false
			}
		},
		onLoad(options) {
			this.mallOrderId = options.mallOrderId
		},
		onShow() {
			this.loadDetail()
		},
		computed: {
			sendTitle() {
				const {
					takeCounty,
					takeCity,
					takeProvince,
					takeAddress
				} = this.orderInfo
				return `${takeProvince}${takeCity}${takeCounty}${takeAddress}`
			},
			sendDesc() {
				const {
					takePhone,
					takeMan
				} = this.orderInfo
				return `${takeMan} ${takePhone}`
			},
			reciveTitle() {
				const {
					backAddress,
					backCity,
					backProvince,
					backCounty
				} = this.orderInfo
				return `${backProvince}${backCity}${backCounty}${backAddress}`
			},
			reciveDesc() {
				const {
					backPhone,
					backMan
				} = this.orderInfo
				return `${backMan} ${backPhone}`
			},
		},
		methods: {
			formatterTakePreTime(time1, time2) {
				if (!time1 || !time2) {
					return ''
				}
				const time2Time = time2.split(' ')[1]
				return `${time1}-${time2Time}`
				
				// if (!time1 || !time2) {
				// 	return ''
				// }
				// const time1Date = new Date(time1)
				// const time2Date = new Date(time2)
				// const year = time1Date.getFullYear()
				// const month = time1Date.getMonth()
				// const day = time1Date.getDay()
				// const hour1 = time1Date.getHours()
				// const hour2 = time2Date.getHours()
				
				// return `${this.$u.timeFormat(time1, 'yyyy-mm-dd hh:MM')}-${this.$u.timeFormat(time2, 'hh:MM')}`
			},
			// 查询订单详情
			loadDetail() {
				this.loading = true
				this.$u.api
					.postGetOrderMallById({
						mallOrderId: this.mallOrderId
					})
					.then(res => {

						if (res.data.orderMall) {
							if (res.data.orderMall.goodsSku != null) {
								const {
									price,
									integral,
									specImages,
									purchasePrice
								} = JSON.parse(res.data.orderMall.goodsSku)
								res.data.orderMall.goodsPrice = price;
								res.data.orderMall.integral = integral;
								res.data.orderMall.goodsImages = specImages;
								res.data.orderMall.purchasePrice = purchasePrice;
							}
							res.data.orderMall.takePreTime = this.formatterTakePreTime(res.data.orderMall
								.takePreTimeStart, res.data.orderMall.takePreTimeEnd)
						}
						this.orderInfo = res.data.orderMall;
						this.loadDeliveryRouters()
						console.log(res, '[订单详情页面-查询订单详情接口]', this.orderInfo);
						this.loading = false
					})
					.catch(err => {
						console.log(err);
					});
			},
			loadDeliveryRouters() {
				if (!this.orderInfo.deliveryNumber) {
					return
				}
				this.$u.api.getGetDeliveryRouters({
					wayBillNo: this.orderInfo.deliveryNumber
				}).then(res => {
					console.log(res)
					this.routers = res?.data.routes || res?.data[0]?.routes
					// this.routers = [...res?.data[0]?.routes, ...res?.data[0]?.routes,...res?.data[0]?.routes]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-page {
		display: flex;
		height: 100vh;
		width: 100vw;
		align-items: center;
		justify-content: center;
	}

	.order-details {
		padding: 30rpx;
		background-color: rgb(242, 242, 242);
		min-height: 100vh;
		box-sizing: border-box;

	}

	.order-details-content {
		padding: 30rpx;
		padding-bottom: 0;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.order-item-content {
		display: flex;
		justify-content: space-between;
		border-bottom: dashed 1rpx #dfdfdf;
		padding-bottom: 30rpx;
		margin-bottom: 20rpx;
	}

	.order-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-end;
		text-align: right;
	}

	.order-item-title {
		font-size: 30rpx;
	}

	.order-item-desc {
		font-size: 24rpx;
		color: #515151;
	}

	.order-details-row {
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
	}

	.order-details-row-desc {
		color: #515151;
	}

	.home-address {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin: 18rpx auto 0;
		border-top: dashed 1rpx #dfdfdf;
	}

	.select-item {
		margin-bottom: 56rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-recive {
			margin-bottom: 0;
		}
	}

	.select-text {
		margin: 0 20rpx;
		flex: 1;

		&-title {
			font-size: 32rpx;
			display: -webkit-box !important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical !important;
			text-align: right;
		}

		&-desc {
			margin-top: 8rpx;
			font-size: 26rpx;
			color: #999;
			text-align: right;
		}
	}

	.select-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 90rpx;
		box-sizing: border-box;

		&-send {
			color: #fff;
			background-color: #3D9C9A
		}

		&-recive {
			color: #3D9C9A;
			background-color: #fff;
			border: solid #3D9C9A 1rpx;
		}
	}

	.order-details-routers {
		margin-top: 30rpx;

		&-header {
			padding-bottom: 20rpx;
		}
	}

	.order-details-routers-item {
		display: flex;
		position: relative;
		margin-bottom: 24rpx;

		&-line {
			position: absolute;
			left: 9rpx;
			top: 30rpx;
			width: 1rpx;
			height: 80%;
			background-color: #999;
		}

		&-icon {
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
			background-color: #999;
			margin-right: 20rpx;
		}

		&-desc {
			color: #999;
		}
	}
</style>